<template>
  <KView class="payment-goods-item clearfix">
    <KView class="goods-item-pic">
      <sys-image :src="goods.pic" mode="auto" :radius="8"></sys-image>
      <KView class="goods-item-buyMethod" :class="`type_${goods.buyMethod}`">
        <KView class="goods-item-buyMethod-img">
          <img class="sys-img" :src="buyMethodImg[goods.buyMethod]" mode="aspectFit">
        </KView>
        <span>{{i18n.getMsg(`common.buyMethod.${goods.buyMethod}`)}}</span>
      </KView>
    </KView>

    <KView class="goods-item-content">
      <KView class="ellipsis goods-item-name">{{goods.name}}</KView>
      <KView class="ellipsis goods-item-desc">{{goods.modelName}}</KView>
      <KView class="goods-item-data clearfix">
        <KView class="goods-item-price">
          <span class="price-unit">¥</span>
          <span class="price-num">{{goods.price}}</span>
        </KView>
        <KView class="goods-item-sourcePrice" v-if="goods.price>=goods.sourcePrice">
          ¥{{goods.sourcePrice}}
        </KView>
        <KView class="goods-item-count">{{goods.count}}件</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import SysImage from 'common/sysImage';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        buyMethodImg: GlobalData.images.shopMall.buyMethod
      };
    },

    components: {
      SysImage
    }
  };

</script>

<style lang="scss">
  .payment-goods-item {
    height: calc(2px + #{formatPx(160)});

    >div {
      float: left;
      height: 100%;
    }

    .goods-item-pic {
      width: formatPx(160);
      height: 100%;
      border: 1px solid #F0F0F0;
      border-radius: 8px;
      overflow: hidden;
      position: relative;

      .goods-item-buyMethod {
        position: absolute;
        left: 0;
        top: 0;
        width: formatPx(112);
        height: formatPx(40);
        line-height: formatPx(40);
        border-bottom-right-radius: 8px;
        color: #ffffff;
        padding: 0 formatPx(12);
        text-align: right;
        font-size: formatPx(20);

        &.type_1 {
          background: #ffa814;
        }

        &.type_2 {
          background: #59c264;
        }

        .goods-item-buyMethod-img {
          float: left;
          height: 100%;
          width: formatPx(26);
        }
      }
    }

    .goods-item-content {
      margin-left: formatPx(20);
      width: calc(100% - #{formatPx(180)} - 2px);

      .goods-item-name {
        font-size: formatPx(30);
        color: #2f3135;
        margin-bottom: formatPx(10);
      }

      .goods-item-desc {
        font-size: formatPx(21);
        color: #b3b9c2;
        height: formatPx(25);
        line-height: formatPx(25);
        margin-bottom: formatPx(30);
      }

      .goods-item-data {
        height: formatPx(38);

        >div {
          float: left;
          height: 100%;
        }

        .goods-item-price {
          color: #FF641F;

          .price-unit {
            font-size: formatPx(32);
            line-height: formatPx(38);
            margin-right: formatPx(5);
          }

          .price-num {
            font-size: formatPx(40);
            font-weight: bold;
            line-height: formatPx(38);
          }
        }

        .goods-item-sourcePrice {
          margin-left: formatPx(15);
          font-size: formatPx(24);
          color: #b3b9c2;
          text-decoration: line-through;
          line-height: formatPx(50);
        }

        .goods-item-count {
          float: right;
          height: 100%;
          font-size: formatPx(30);
          line-height: formatPx(38);
        }
      }
    }
  }

</style>
